<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给你的专属情书</title>
    <!-- 外部资源CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置：自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        love: {
                            light: '#ffccd5',
                            DEFAULT: '#ff8fa3',
                            dark: '#d946ef'
                        }
                    },
                    fontFamily: {
                        love: ['"Noto Serif SC"', 'serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类：毛玻璃、文字阴影等 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            }
            .glass {
                background: rgba(255, 255, 255, 0.25);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.18);
            }
            .glass-btn {
                background: rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                transition: all 0.3s ease;
            }
            .glass-btn:hover {
                background: rgba(255, 255, 255, 0.45);
                transform: scale(1.05);
            }
        }
    </style>
    
    <!-- 核心样式：背景、动画、布局 -->
    <style>
        /* 背景图设置：全屏覆盖、居中显示 */
        .bg-love {
            background-image: url('1.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        
        /* 优化的字幕滚动动画：减少初始延迟，更快显示文字 */
        @keyframes scrollSubtitle {
            0% {
                transform: translateY(30vh); /* 从视口下方30%位置开始，而非完全不可见 */
                opacity: 0;
            }
            5% {
                opacity: 1; /* 更快显示文字 */
            }
            95% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh);
                opacity: 0;
            }
        }
        .subtitle-animation {
            animation: scrollSubtitle 60s linear forwards;
            animation-delay: 0.3s; /* 大幅减少延迟时间 */
            opacity: 0; /* 初始隐藏，准备动画 */
        }
        
        /* 页面加载完成后立即显示文字容器 */
        .page-loaded .subtitle-animation {
            opacity: 1;
        }
        
        /* 心跳动画：爱心图标动态效果 */
        @keyframes heartbeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.1); }
            28% { transform: scale(1); }
            42% { transform: scale(1.1); }
            70% { transform: scale(1); }
        }
        .heartbeat {
            animation: heartbeat 1.5s infinite;
        }
        
        /* 音频控制按钮：固定在左上角 */
        .audio-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 50;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 音频状态提示：自动消失的半透明提示框 */
        .audio-toast {
            position: fixed;
            top: 80px;
            left: 20px;
            z-index: 40;
            padding: 8px 16px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.8);
            color: #333;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .audio-toast.show {
            opacity: 1;
        }
        
        /* 页面加载过渡 */
        body {
            opacity: 0;
            transition: opacity 0.5s ease-out;
        }
        body.page-loaded {
            opacity: 1;
        }
    </style>
</head>
<body class="bg-love min-h-screen flex items-center justify-center overflow-hidden font-love">
    <!-- 背景音乐组件：支持MP3/OGG双格式，循环播放 -->
    <audio id="bgMusic" loop preload="metadata"> <!-- 只预加载元数据，加快页面加载 -->
        <source src="https://er-sycdn.kuwo.cn/ae6e04c525895ca4fbfcaeae522b0948/68aaafb7/resource/30106/trackmedia/M800001M6iit3L8nVj.mp3" type="audio/mpeg">
        <source src="https://er-sycdn.kuwo.cn/ae6e04c525895ca4fbfcaeae522b0948/68aaafb7/resource/30106/trackmedia/M800001M6iit3L8nVj.mp3" type="audio/ogg">
        您的浏览器不支持音频播放，请更新浏览器后重试
    </audio>
    
    <!-- 音频控制按钮：左上角毛玻璃风格 -->
    <div id="audioControl" class="audio-btn glass-btn">
        <i id="audioIcon" class="fa fa-pause"></i>
    </div>
    
    <!-- 音频状态提示框：显示播放/暂停/错误信息 -->
    <div id="audioToast" class="audio-toast">
        背景音乐播放中
    </div>
    
    <!-- 背景半透明遮罩：增强文字可读性 -->
    <div class="absolute inset-0 bg-black bg-opacity-30 z-0"></div>
    
    <!-- 主内容容器：居中显示，响应式宽度 -->
    <div class="relative z-10 w-full max-w-2xl px-4 md:px-8">
        <!-- 页面标题：带心跳爱心图标 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl md:text-5xl text-white font-bold text-shadow">
                <i class="fa fa-heart text-love animate-pulse mr-2"></i>给你的专属情书
            </h1>
        </div>
        
        <!-- 字幕容器：固定高度，溢出隐藏 -->
        <div class="relative h-[70vh] overflow-hidden rounded-xl">
            <!-- 文字毛玻璃背景：白色半透明模糊 -->
            <div class="absolute inset-0 glass rounded-xl z-0"></div>
            
            <!-- 情书内容：字幕滚动效果 -->
            <div class="subtitle-animation relative z-10 px-6 md:px-10 text-white text-lg md:text-xl leading-relaxed text-shadow">
                <p class="mb-6">亲爱的你：</p>
                
                <p class="mb-6">当我写下这些文字时，指尖都在微微发烫——原来喜欢一个人时，连表达都变得小心翼翼，怕词不达意，又怕藏不住心意。</p>
                
                <p class="mb-6">认识你之前，我的日子像重复播放的黑白电影；直到你出现，像一束光撞进我的世界，连路边的落叶、傍晚的晚霞，都突然有了不一样的意义。</p>
                
                <p class="mb-6">我记得你笑起来时眼角的弧度，记得你聊起喜欢的事物时眼里的光，记得你偶尔皱眉思考的样子——这些细碎的瞬间，像星星一样，悄悄落在我心里，攒成了整片星空。</p>
                
                <p class="mb-6">和你在一起的每一刻都很珍贵：哪怕只是并肩走在晚风里，哪怕只是分享一杯热饮，哪怕只是安静地各做各的事，我都觉得很安心、很快乐。</p>
                
                <p class="mb-6">我不敢说自己是最完美的人，但我敢说，我会用最真诚的心对待你；我不敢承诺永远，但我想和你一起，把每个"今天"过好，慢慢走向未来。</p>
                
                <p class="mb-6">今天，我想鼓起勇气告诉你：我喜欢你，不是一时兴起，而是深思熟虑后的真心。</p>
                
                <p class="mb-6">如果你愿意，我想牵着你的手，一起去看春天的花、夏天的海、秋天的落叶、冬天的雪；如果你暂时还没准备好，也没关系——能认识你，能陪在你身边，对我来说已经是很幸运的事。</p>
                
                <p class="mt-10 text-right">想和你一起走下去的人</p>
                <p class="text-right mt-2">2025年8月</p>
            </div>
        </div>
        
        <!-- 底部交互区：重置按钮 + 心跳爱心 -->
        <div class="mt-8 text-center">
            <button id="restartBtn" class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-6 py-3 rounded-full transition-all duration-300 flex items-center mx-auto">
                <i class="fa fa-refresh mr-2"></i> 再看一次
            </button>
            
            <div class="mt-6">
                <span class="inline-block text-white text-shadow heartbeat">
                    <i class="fa fa-heart text-love text-2xl"></i>
                </span>
            </div>
        </div>
    </div>
    
    <!-- 交互逻辑：优化加载速度和显示效果 -->
    <script>
        // 1. 页面加载完成后立即显示内容，不等待音频加载
        document.addEventListener('DOMContentLoaded', function() {
            // 立即标记页面为已加载，显示文字内容
            document.body.classList.add('page-loaded');
            
            // 初始化音频（但不阻塞文字显示）
            setTimeout(initAudio, 500);
        });
        
        // 2. 音频相关元素获取
        const bgMusic = document.getElementById('bgMusic');
        const audioControl = document.getElementById('audioControl');
        const audioIcon = document.getElementById('audioIcon');
        const audioToast = document.getElementById('audioToast');
        
        // 3. 初始化音频（非阻塞方式）
        function initAudio() {
            try {
                // 尝试自动播放，但不阻塞页面其他内容
                bgMusic.play().then(() => {
                    showAudioToast('背景音乐播放中');
                }).catch(() => {
                    showAudioToast('点击播放背景音乐');
                    audioIcon.classList.replace('fa-pause', 'fa-play');
                    // 绑定一次点击/触摸事件
                    document.body.addEventListener('click', playAudioOnTouch, { once: true });
                    document.body.addEventListener('touchstart', playAudioOnTouch, { once: true });
                });
            } catch (e) {
                console.log('音频初始化失败:', e);
            }
        }
        
        // 4. 用户交互后播放音频
        function playAudioOnTouch() {
            bgMusic.play().then(() => {
                audioIcon.classList.replace('fa-play', 'fa-pause');
                showAudioToast('背景音乐播放中');
            }).catch(() => {
                showAudioToast('音频播放失败，请检查文件');
            });
        }
        
        // 5. 显示音频状态提示
        function showAudioToast(message) {
            audioToast.textContent = message;
            audioToast.classList.add('show');
            setTimeout(() => {
                audioToast.classList.remove('show');
            }, 3000);
        }
        
        // 6. 音频控制按钮点击事件
        audioControl.addEventListener('click', () => {
            if (bgMusic.paused) {
                bgMusic.play();
                audioIcon.classList.replace('fa-play', 'fa-pause');
                showAudioToast('背景音乐播放中');
            } else {
                bgMusic.pause();
                audioIcon.classList.replace('fa-pause', 'fa-play');
                showAudioToast('背景音乐已暂停');
            }
        });
        
        // 7. 音频加载错误处理
        bgMusic.addEventListener('error', () => {
            showAudioToast('音频加载失败，请检查文件路径');
            audioIcon.classList.replace('fa-pause', 'fa-exclamation-circle');
        });
        
        // 8. 重置字幕动画
        document.getElementById('restartBtn').addEventListener('click', () => {
            const subtitle = document.querySelector('.subtitle-animation');
            // 重置动画
            subtitle.style.animation = 'none';
            subtitle.offsetHeight; // 强制重绘
            subtitle.style.animation = 'scrollSubtitle 60s linear forwards';
            subtitle.style.animationDelay = '0.3s'; // 保持短延迟
            
            // 重置时自动播放音频（如果已暂停）
            if (bgMusic.paused) {
                bgMusic.play().catch(() => {
                    // 播放失败不影响动画重置
                });
                audioIcon.classList.replace('fa-play', 'fa-pause');
                showAudioToast('背景音乐播放中');
            }
        });
    </script>
</body>
</html>
    